<!DOCTYPE html>
<html>

<body class="bgf6">

<div th:include="common/bookTop :: commonTop"></div>
	
	<div class="main-body pb100" id="app">
		<div class="container pt10">
			<div class="dflx sbt">
				<div class="body-left bgff">

					<div th:include="common/bookLeft :: commonLeft"></div>

				</div>
				
				<div class="body-right">
					<div class="bread-nav bgff">
						<ul class="dflx">
							
						</ul>
					</div>
					
					<div class="bgff mt10 pb20 edit-mode">

						<el-row>

							<el-col :span="8" v-for="book in books">
								<div class="grid-content bg-purple" @click="toBookDetal(book.commoId)">
									<el-card :body-style="{ padding: '0px' }">
										<img :src="book.pictureUrl" class="image">
										<div style="padding: 14px;">
											<span>{{book.commoName}}</span>
											<div class="bottom clearfix">
												<span>{{book.author}}</span>
												<el-button type="text" class="button">购买</el-button>
											</div>
										</div>
									</el-card>
								</div>
							</el-col>

						</el-row>

					</div>
				</div>
			</div>
		</div>
	</div>

<script type="text/javascript">

	var firstNavId = '[[${firstNavId}]]';
	var secondNavId = '[[${secondNavId}]]';
	var thirdNavId = '[[${thirdNavId}]]';

	var app = new Vue({
		el : '#app',
		data : {
			books : []
		},
		created : function() {
			//加载书
			loadBooks();
		},
		methods : {
			formatBookName : function (bookName) {
				if (bookName.length < 16) {
					return bookName;
				}
				return bookName.substring(0, 16);
			},
			toBookDetal : function (bookId) {
				window.location.href = '/book/' + bookId + '.html';
			}
		}
	});

	function loadBooks() {
		atm.ajax({
			url : '/commodity/loadThirdNavCommos',
			requestMethod : 'POST',
			data : {
				thirdNavId : [[${thirdNavId}]]
			},
			success : function (responseData) {
				app.books = responseData.data;
			}
		});
	}

</script>
</body>
</html>
